<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户修改</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/index.js"></script>

<!--<style>
        .imgs{display: none;}
        .picture{display: none;}
    </style>-->

<!--百度编辑器-->
<script src="./ueditor/ueditor.config.js"></script>
<script src="./ueditor/ueditor.all.min.js"></script>
<script src="./ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>

	<div class="layui-card">
		<form class="layui-form layui-form-pane" action="../../CustomerServlet" id="updateForm" method="post" enctype="multipart/form-data">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">基本信息</li>
				</ul>

				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
					<!-- 	<form class="layui-form layui-form-pane" action="../goods" id="addForm" > -->
							<input type="hidden" name="op" value="updateCustomer">
							<!-- 修改还需要传递商品编号 -->
							<input type="hidden" name="customerId" value="${param.customerId}">
							<div class="layui-form-item">
								<label class="layui-form-label"> <span class='x-red'>*</span>用户昵称
								</label>
								<div class="layui-input-block">
									<input type="text" name="nickname" autocomplete="off" value=""
										placeholder="空制在10个汉字，20个字符以内" class="layui-input" required="required">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"> <span class='x-red'>*</span>用户手机号
								</label>
								<div class="layui-input-block">
									<input type="text" name="mobile" autocomplete="off" value=""
										placeholder="" class="layui-input" required="required">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"> <span class='x-red'>*</span>用户密码
								</label>
								<div class="layui-input-block">
									<input type="text" name="password" autocomplete="off"
										value="" placeholder="" class="layui-input" required="required">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"> <span class='x-red'>*</span>状态
								</label>
								<div class="layui-input-block">
									<input type="checkbox" name="status" title="正常">
								</div>
							</div>


							<div class="layui-form-item">
								<label for="link" class="layui-form-label"> <span
									class="x-red"></span>用户头像
								</label>
								<div class="layui-input-block">
									<input type="file" name="imageFile" autocomplete="off" id="imageFile"
										value="" placeholder="" class="layui-input">
								</div>
								<!-- <div class="layui-input-inline">
									<div class="site-demo-upbar">
										<button type="button" class="layui-btn" id="test3">
										<i class="layui-icon"></i>上传文件
									</button> 
										
									</div>
								</div> -->
							</div>
							<div class="layui-form-item imgs" id="imgshow">
								<label class="layui-form-label">预览</label> 
								<img src=""  id="pimages" name="yulan" style="width: 200px; height: 200px;" /> 
								<!-- <input id="avatar" name="image" required="" type="hidden" value="images"> -->
							</div>

							<div class="layui-form-item">
								<button class="layui-btn" type="submit" lay-filter="add"
									lay-submit="">修改</button>
							</div>
						<!-- 	</form> -->
						<div style="height: 100px;"></div>
					</div>
				</div>
			</div>
		</form>
	</div>
    <!-- 引入jQuery.js -->
	<script type="text/javascript" src="./js/jquery.js"></script>
	<!-- 引入jQuery.form.js -->
	<script type="text/javascript" src="./js/jquery-form.js"></script>
	
	<script>
		$(function(){
			
			// 1.进入页面发起HTTP GET 异步请求,获取当前要编辑的商品对象信息
			// 从路径上获取商品编号
			let customerId = "${param.customerId}";
			$.ajax({
				type:"GET",
				url:"${pageContext.request.contextPath}/CustomerServlet",
				data:{
					op:"findById",
					customerId:customerId
				},
				contentType:"application/x-www-form-urlencoded",
				dataType:"json",
				success:function(result){
					if(result.data != null){
						// 将对象信息显示在指定表单域...
						// result.data对象中数据一个个取到设置到表单控件值中
						let customer = result.data;
						// 例如商品名称填充
						$("#updateForm input[name='nickname']").val(customer.nickname);
						$("#updateForm input[name='mobile']").val(customer.mobile);
						$("#updateForm input[name='password']").val(customer.password);
						if(customer.status == 1 ){
							$("#updateForm input[name='status']").prop("checked","on");
						}else{
							$("#updateForm input[name='status']").prop("checked","null");
						}
						$("#pimages").prop("src","../../FileDownloadServlet?type=image&fileName="+ customer.image);
					
						
						// ....
					}
					
				},
				error:function(){
					alert("异步请求失败");
				}
			});
			
			// 3.修改商品,异步提交表单
			$("#updateForm").submit(function(){
				
				// 拓展:表单提交之前,校验表单内容
				// 商品名称、商品售价、库存目前只是简单设置必填属性,自行拓展其他效验
				
				$("#updateForm").ajaxSubmit(function(result){
					if(result.status == 1){				
						// 关闭添加弹出框
						  layer.msg("修改商品成功", {icon: 6,time:4000},function () {
							  	// 调用父窗口(goodslist.jsp)的查询方法 
	                            window.parent.getCustomerList(); 
							  	// 关闭当前子窗口
	                            var index = parent.layer.getFrameIndex(window.name);
	                            parent.layer.close(index);
	                        });
					}else{
						layer.msg(result.message,{icon:5,time:4000});
					}
				});
				
				return false;
			});
			
			// 3.关于前端图片预览...
			$("#imageFile").change(function(){
				// 获取文件
				let imageFile = this.files[0];
				
				// 判断是否有选择文件
				if(imageFile != null){
					// 构建读取流
					let fileReader = new FileReader();
					// 读取文件
					fileReader.readAsDataURL(imageFile);
					// 利用读取流对象加载事件
					fileReader.onload = function(){
						// 将文件显示在指定DOM元素
						document.getElementById("pimages").src = this.result;
					}
				}else{
					document.getElementById("pimages").src = "";
				}
			
			});
		})

	</script>
	
	
<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  /*   UE.getEditor('content',{initialFrameWidth:600,initialFrameHeight:400,}); */
</script>
<script>
    layui.use(['laydate','element','layer','form','upload'], function(){
        var  $ = layui.jquery;//jquery
        var lement = layui.element;//面包导航
        var layer = layui.layer;//弹出层
        var form = layui.form;
        var upload = layui.upload;

        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //图片上传接口
        /*layui.upload({
          url: './upload.json' //上传接口
          ,success: function(res){ //上传成功后的回调
              console.log(res);
            $('#LAY_demo_upload').attr('src',res.url);
          }
        });*/
        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            ,url: 'https://httpbin.org/post' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res);
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
            var title=$("input[name='title']").val();
            //var content=$("textarea[name='content']").val();

            var article_category_id=$('#article_category_id option:selected') .val();//所属文章类型
            //alert(title);
            //var form=$("#cate_add").serialize();
            if(title==""){
                layer.msg('文章标题不能为空',{icon:5,time:2000});return false;
            }
            if(article_category_id==""){
                layer.msg('文章类型不能为空',{icon:5,time:2000});return false;
            }
            /*if(content){
                layer.msg("文章内容不能为空！",{icon:5,time:2000});return false;
          }*/
            var data = data.field;
            $.ajax({
                type:"post",
                url:"",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.info, {icon: 6,time:2000},function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                        return false;

                    }else{
                        layer.msg(data.info,{icon:5,time:2000});return false;
                    }
                }

            });

        });

    })
</script>

</body>
</html>